<template>
  <div class="main">
    <Top name1='商品管理' name2="商品分类"></Top>
    <el-row>
      <el-button style="margin:10px 0" @click="openAddForm" type='primary'>添加分类</el-button>
    </el-row>
    <el-card  class="box-card" style="width:1400px;margin:40px 20px;padding-top:35px;">
      <table-tree 
      show-index
      :data="GoodsList" 
      :columns="columns"
      :selection-type="false"
      :expand-type = 'false'
      :tree-type='true'
      :border="true"
      :show-row-hover="true"
      >
        <template v-slot:youxiao="scoped">
         <div>
          <i class="el-icon-circle-check" v-if="scoped.row.cat_deleted=true" style="color:rgb(142, 228, 142)"></i>
          <i class="el-icon-circle-check" v-if="scoped.row.cat_deleted=false" style="color:rgb(246, 104, 104)"></i>
         </div>
        </template>
        <template v-slot:paixv="scoped">
         <div>
          <el-tag v-if="scoped.row.cat_level==0" type="warning">一级</el-tag>
          <el-tag v-if="scoped.row.cat_level==1" >二级</el-tag>
          <el-tag v-if="scoped.row.cat_level==2" type="success">三级</el-tag>
         </div>
        </template>
        <template v-slot:doit="scoped">
          <el-tooltip class="item" effect="light" content="编辑分类" placement="top">
            <el-button class="sm" type="primary" @click="resetCate(scoped.row)" icon="el-icon-edit">编辑</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="删除分类" placement="top">
            <el-button class="sm" type="danger" @click="removeCate(scoped.row)" icon="el-icon-delete">删除</el-button>
          </el-tooltip>
        </template>
      </table-tree>
      <!-- 分页部分 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagnum"
          :page-sizes="[5,10]"
          :page-size="getParams.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
        </el-pagination>
      </div>
    </el-card>
      <!-- 添加分类 -->
      <el-dialog
      title="添加分类"
      :visible.sync="addisplay"
      width="50%"
      >
      <el-form  :model="addForm" ref="addForm" label-width="100px" class="demo-dynamic">
        <!-- 分类名 -->
        <el-form-item
          prop="cat_name"
          label="分类名称"
          :rules="[
            { required: true, message: '请输入角色名称', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="addForm.cat_name"></el-input>
        </el-form-item>
        <span class="demonstration" style="margin:0 10px 0 30px">分类列表</span>
        <el-cascader
          v-model="value"
          ref="addTree"
          :options="addformDate"
          :clearable="true"
          :props="{ label: 'cat_name',expandTrigger: 'hover',value:'cat_id'}"
          @change="handleChange"
          ></el-cascader>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addisplay = false">取 消</el-button>
        <el-button type="primary" @click="addAjax">确 定</el-button>
      </span>
    </el-dialog>
      <!-- 编辑分类 -->
      <el-dialog
      title="添加分类"
      :visible.sync="resetdisplay"
      width="50%"
      @close="closereset"
      >
      <el-form  :model="resetForm" ref="resetForm" label-width="100px" class="demo-dynamic">
        <!-- 分类名 -->
        <el-form-item
          prop="cat_name"
          label="分类名称"
          :rules="[
            { required: true, message: '请输入角色名称', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="resetForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetdisplay = false">取 消</el-button>
        <el-button type="primary" @click="resetAjax">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Top from '../../components/top.vue'
import {getGoodsAjax,delCate,addCate,reSetCate } from '../../api/categories.js'
  export default {
    name:'',
    components: {
      Top
    },
    data () {
      return {
          getParams:{
            pagenum:1,
            pagesize:(JSON.parse(window.sessionStorage.getItem("GoodsListSize")))
          },
          columns: [
            {
              label: '分类名称',
              prop: 'cat_name',
              width: 150,
            },
            {
              label: '是否有效',
              width: 150,
              type:'template',
              template:'youxiao'
            },
            {
              label: '排序',
              width: 150,
              type:'template',
              template:'paixv'
            },
            {
              label: '操作',
              width: 250,
              type:'template',
              template:"doit"
            },
          ],
          GoodsList:[],
          total:0,
          pagnum:0,
          pages:0,
          addisplay:false,
          addformDate:[],
          value:[],
          addForm:{
            cat_name:'',
            cat_pid:0,
            cat_level:0
          },
          resetdisplay:false,
          resetForm:{
            cat_name:'',
            cat_id:0
          }
      };
    },
    watch: {},
    created() {
      if(!window.sessionStorage.getItem("GoodsListSize")){
        this.getParams.pagesize = 5
      }
      this.getGoodsList()
    },
    methods: {
      async getGoodsList(){
        const res = await getGoodsAjax(this.getParams)
        if(res.data.meta.status==200){
          this.GoodsList = res.data.data.result
          this.total = res.data.data.total
        }
      },
      // 改变每一页条数
      handleSizeChange(num){
        this.getParams.pagesize = num
        window.sessionStorage.setItem("GoodsListSize",num)
        this.getGoodsList()
      },
      // 点击第几页
      handleCurrentChange(num){
        this.getParams.pagenum = num
        this.getGoodsList()
      },
      // 删除分类
      async removeCate(row){
        this.$confirm('此操作将删除该项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async()=>{
            const res = await delCate(row.cat_id);
            if(res.data.meta.status!==200){
              return this.$message.error("删除失败")
            }
            this.getGoodsList()
            return this.$message.success('该分类已删除')
        }).catch(()=>{
          return this.$message.info('取消删除')
        })
      },
      // 点击添加打开列表  把分类列表渲染到级联选择器
      async openAddForm(){
        this.addisplay = true
        const res = await getGoodsAjax({
          type:2
        })
        if(res.data.meta.status!=200){
          this.addisplay = false
          return $this.$message.error("获取列表失败！")
        }
        this.addformDate = res.data.data
      },
      // 获取当前添加的父级id 和 他的层级 
       handleChange(value){
        this.addForm.cat_pid = value[value.length-1]
        // 有几个父级就是几级(0表示一级分类 1表示二级分类 2表示三级分类)
        this.addForm.cat_level = value.length
      },
      // 点击确认 发送添加请求 
      async addAjax(){
        const res = await addCate(this.addForm)
        // 成功更新数据提示成功 否则提示失败
        if(res.data.meta.status!==201){
          this.addForm.cat_name='',
          this.addForm.cat_pid=0,
          this.addForm.cat_level=0
          return this.$message.error("添加失败")
        }
        this.getGoodsList()
        this.addForm.cat_name=''
        this.addForm.cat_pid=0
        this.addForm.cat_level=0
        this.addisplay = false
        return this.$message.success("添加成功")
      },
      // 编辑分类
      resetCate(row){
        this.resetdisplay = true
        this.resetForm.cat_id = row.cat_id;
      },
      async resetAjax(){
        console.log(this.resetForm);
        const res = await reSetCate(this.resetForm)
        if(res.data.meta.status!=200){
          this.resetdisplay = false
          this.resetForm.cat_id = 0
          this.resetForm.cat_name = ""
          return this.$message.error("更新失败")
        }
        this.getGoodsList()
        this.resetdisplay = false
        this.resetForm.cat_id = 0
        this.resetForm.cat_name = ""
        return this.$message.success("更新成功")
      },
      // 关闭窗口
      closereset(){
          this.resetForm.cat_id = 0
          this.resetForm.cat_name = ""
      }

    },
  }
</script>
<style lang='scss' scoped>
.main{
  padding: 20px;
  .sm{
    padding: 10px;
    font-size: 12px;
  }
  .el-card{
    margin-top: 20px;
  }
  .block{
    display: flex;
    margin-top: 20px;
    width: 1100px;
    justify-content: center;
  }
}
</style>